<template>
  <el-dialog
    v-model="visible"
    @close="closeDialog"
    v-bind="params"
    :title="title"
    destroy-on-close
  >
    <span v-if="content">{{ content }}</span>
    <zc-table
      :column="column"
      :table-data="tableData"
      v-if="column"
      :show-search="false"
      v-bind="tableParams"
      style="margin-top: 0; box-shadow: none"
    ></zc-table>
    <template v-if="render"> <component :is="render"> </component></template>
    <zc-form
      ref="formRef"
      v-if="formConfig && JSON.stringify(formConfig) !== '{}'"
      v-bind="formConfig"
      :request="submitRequest"
    ></zc-form>
    <slot></slot>

    <template #footer v-if="!column">
      <span class="dialog-footer" v-if="showBtn">
        <el-button v-if="showCancelBtn" @click="closeDialog">取消</el-button>
        <el-button
          type="primary"
          @click="
            openOtherDialog
              ? openDialog()
              : formConfig
              ? submit(formRef)
              : closeDialog()
          "
        >
          确定
        </el-button>
      </span>
    </template>
    <el-dialog
      v-model="innerVisible"
      v-bind="secondParams"
      append-to-body
      v-if="openOtherDialog"
    >
      {{ secondContent }}
      <template #footer v-if="!column">
        <span class="dialog-footer">
          <el-button @click="innerVisible = false">取消</el-button>
          <el-button type="primary" @click="innerVisible = false">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </el-dialog>
</template>

<script setup lang="ts">
import { ZCForm } from "@/model/zcForm";
import { ZCTableOption } from "@/model/zcTable";
import { ValidateFieldsError } from "async-validator";
import { FormInstance } from "element-plus";
const innerVisible = ref<boolean>(false);
const formRef = ref<FormInstance>();
const props = withDefaults(
  defineProps<{
    visible: boolean;
    render?: () => {};
    submitRequest?: (props: any) => {};
    title?: string;
    width?: string;
    content?: string;
    column?: ZCTableOption[];
    showIndexColumn?: boolean;
    showSelectColumn?: boolean;
    openOtherDialog?: boolean;
    appendToBody?: boolean;
    secondTitle?: string;
    destroyOnClose?: boolean;
    showBtn?: boolean;
    showCancelBtn?: boolean;
    secondWidth?: string;
    secondContent?: string;
    tableData?: any[];
    formConfig?: ZCForm;
  }>(),
  { showBtn: true, showCancelBtn: true }
);

const tableParams = {
  showIndexColumn: props?.showIndexColumn,
  showSelectColumn: props?.showSelectColumn,
};
const title = ref("");
const params = {
  width: props?.width,
  destroyOnClose: props.destroyOnClose,
  appendToBody: props.appendToBody,
};
const secondParams = {
  title: props?.secondTitle,
  width: props?.secondWidth,
};
const visible = ref(false);

watch(
  () => props.visible,
  (val) => {
    visible.value = val;
  }
);
watch(
  () => props.title,
  (val) => {
    title.value = val!;
  },
  {
    immediate: true,
  }
);

const emit = defineEmits<{ (e: "update:visible", data?: any): void }>();
// 关闭弹窗
const closeDialog = () => {
  emit("update:visible", false);
};
// 提交
const submit = async (formRef?: any) => {
  console.log(formRef);
  await formRef.ruleFormRef.validate(
    (valid: boolean, fields: ValidateFieldsError | undefined) => {
      if (valid) {
        formRef.searchBtnClick(formRef.ruleFormRef);
        closeDialog();
      } else {
        console.log("error submit!", valid, fields);
      }
    }
  );
};
// 打开第二层
const openDialog = () => {
  innerVisible.value = true;
};
</script>

<style lang="scss">
.el-dialog__title {
  font-size: 22px;
  font-weight: bold;
}
</style>
